import { loginService, getUserInfoService } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { constantRoutes, resetRouter } from '@/router'
const state = {
  token: getToken(), // 从缓存中获取初始值
  userInfo: '', // 存储用户基本资料状态
  routes: constantRoutes // 静态路由的数据
}

const mutations = {
  setToken(state, newToken) {
    state.token = newToken
    //同步到缓存
    setToken(newToken)
  },
  removeToken(state) {
    //删除vuex的token
    state.token = null
    removeToken()
  },
  setUserInfo(state, userInfo) {
    state.userInfo = userInfo
  },
  setRoutes(state, newRoutes) {
    state.routes = [...constantRoutes, ...newRoutes] // 静态路由 + 动态路由
  }
}

const actions = {
  login(context, loginData) {
    // console.log(loginData);
    // todo: 调用登录接口
    //注意这里一定要返回这个promise对象(使用.then),否则.then()是异步方法，同时return了之后也好用await
    //如果这里用 async 和 await 就不必如上了
    return loginService(loginData).then((res) => {
      // console.log(res);
      context.commit('setToken', res.data)
    })
  },
  // 获取用户的基本资料
  async getUserInfo(context) {
    const res = await getUserInfoService()
    context.commit('setUserInfo', res.data)
    return res.data // 返回数据
  },
  //退出登录的action
  logout(context) {
    context.commit('removeToken') // 删除 token
    context.commit('setUserInfo', {}) // 清空用户信息
    resetRouter() // 重置路由
  }
}

const getters = {}

export default {
  namespaced: true, // 开启命名空间
  state,
  mutations,
  actions
}
